<template>
  <div id="app">
      <div class="main">
          <!-- 顶部组件 -->
          <header-navs v-if="!$route.meta.headerflag"></header-navs>
          <transition
        enter-active-class=" animate__animated animate__fadeInRightBig"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <!-- 路由出口 -->
          <!-- 路由视图 -->
          <router-view  v-if="routerAlive"></router-view>
      </transition>


          <!-- 音乐播放 -->
          <player></player>
      </div>
  </div>
</template>

<script>

import headerNavs from "./components/base/headerNavs"
import player from "./components/base/player"


export default {

  data(){
    return{
      headerflag:true,
      routerAlive:true,
      withRouter:true
    }
  },
  components:{
      headerNavs,
      player
  },
  // watch:{
  //   "$route":function(newpath,oldpath){
  //     console.log(newpath.path);
  //     console.log(oldpath.path);
  //     if(newpath.path == "/recommend/musiclist"){
  //       this.headerflag = false
  //     }else{
  //       this.headerflag = true
  //     }
  //     console.log(this.$route)
  //   }
  // }
}
</script>

<style lang="less">
@import "./assets/css/base.css";
html,body,#app{
    width: 100%;
    height: 100%;
}


</style>
